<%@page contentType="text/html;charset=UTF-8" language="java" %>
<%@page import="qualomelhor.gwt.modules.client.ClientUtils"%>
<%@page import="java.net.URLEncoder"%>
<%@page import="qualomelhor.database.Comparacao"%>
<%@page import="qualomelhor.database.Comparacao.TipoComparacao"%>
<%@page import="qualomelhor.database.Produto"%>
<%@page import="java.util.ArrayList"%>
<%@page import="qualomelhor.server.DAO"%>
<%@page import="qualomelhor.database.Avatar"%>
<%@page import="qualomelhor.database.ParametrosSistema.SiteHost"%>
<%@page import="qualomelhor.util.Util"%>

<%
	String backgroundUrl = (String)session.getAttribute("BACKGROUND");

	DAO d = new DAO();
	String idComparacao = request.getParameter("comp");
	SiteHost site = SiteHost.getSiteHostPerHost(request.getServerName());
	String locale = (String)session.getAttribute("LOCALE");
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<title><%="[" + request.getServerName() + "] - " + session.getAttribute("paginaAtual")%></title>
		<meta charset="utf-8">
	    <meta name="author" content="Qual o Melhor Team">
		<meta name="title" content="qual o melhor">
		<meta name="description" content="entrega digital, compre seus itens online e receba por email instantaneamente rapidamente">
		<meta http-equiv="expires" content="">
		<meta http-equiv="VW96.OBJECTTYPE" content="Internet">
		<meta name="rating" content="webmaster">
		<meta name="revisit-after" content="2 weeks">
	    <meta name="keywords" content="quem, qual, melhor, comparacao, pessoas, produto, habilidade, tecnica, forma, fazer, metodo, beleza, capacidade">
	    <meta name="robots" content="index,follow">
	    <meta http-equiv="content-language" content="pt">
	    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta name="reply-to" content="o.que.e.melhor@gmail.com">
		<meta http-equiv="X-UA-Compatible" content="IE=9" >

		<!-- [if IE 9]>
			<meta http-equiv="X-UA-Compatible" content="IE=9" >
		<![endif]-->

	    <!--[if lt IE 9]>
    		<script src="//html5shim.googlecode.com/sin/trunk/html5.js"></script>
    	<![endif]-->

	    <link type="text/css" rel="stylesheet" href="/stylesheets/qualomelhor.css">

		<!--[if IE 6]>
			<script src="/javascript/DD_belatedPNG.js"></script>
			<script>
	  			/* EXAMPLE */
  				DD_belatedPNG.fix('.png_bg');
  
		  		/* string argument can be any CSS selector */
  				/* .png_bg example is unnecessary */
  				/* change it to what suits you! */
			</script>
		<![endif]-->

		<script type="text/javascript">
			function votarProduto(link, produto) {
				top.location = link + "?v=" + produto;
			}
		</script>
	</head>
	<body id="mybody" style="width: 100%; background-image: url('<%=backgroundUrl%>');">

		<section>
			<% Comparacao comp = d.getComparacao(Long.parseLong(idComparacao)); %>
			<% if (comp.getTipoComparacao() == TipoComparacao.TIPO_COMPARACAO_2_PRODUTOS) { %>
				<% Produto p1 = d.getProduto(comp.getListProdutosComp().get(0)); %>
				<% Produto p2 = d.getProduto(comp.getListProdutosComp().get(1)); %>
				<% long[] numVotosTotais = comp.getNumVotos(); %>

				<% String strImageP1 = (p1.getListEnderecoFoto() != null?p1.getListEnderecoFoto().get(0): "/images/boneco.png"); %>
				<% String strImageP2 = (p2.getListEnderecoFoto() != null?p2.getListEnderecoFoto().get(0): "/images/boneco.png"); %>

				<div style="position: relative; width: 99%; height: 136px; margin: 2px 0.5%; overflow: hidden;">

					<% String link = "http://" + site.getHost() + "/" + comp.getPath(site); %>
					<!-- Coment -->
					<div id="divComent" style="position: absolute; top: 0px; width: 100%; height: 20px; margin: 0px auto; background-color: white;">
						<% long numComents = comp.getNumComentariosTotal(); %>
						<% if (numComents > 0) { %>
							<P class="linkFormat2" style="line-height: 20px; text-align: center;">
								<a onclick="top.location='<%=link%>';"><span class="boxRounded3" style="font-size: 12px; font-family: tahoma; padding: 0px 5px; background-color: white;"><%=(numComents + " " + Util.getConstant("comentário(s)", locale))%></span></a>
							</P>
						<% } %>
					</div>

					<div id="divPlacar" style="position: absolute; top: 26px; width: 96%; height: 70px; margin: 0px 2%;">
						<div id="divSubPlacar" style="position: relative; width: 270px; height: 100%; margin: 0px auto;">
							<!-- 
							<div class="backgroundTransp boxRounded3" style="width:100%; height: 100%; background-color: #E0FFFF;">
							</div>
							 -->
							<P class="divCenter fontPlacar" style="position: absolute; width: 100%; text-align: center;">
								x
							</P>
						</div>
					</div>

					<!-- Titulo / Pergunta -->
					<% String perg = comp.getPergunta(site, locale); %>
					<% String pergHtml = comp.getPerguntaHTML(site, locale); %>

					<% if (p1 != null) { %>
						<div id="divProd1" style="position: relative; width: 150px; height: 100%; float: left;">
							<div class="backgroundTransp" style="width:100%; height: 100%; background-color: #E0FFFF;">
							</div>
							<div style="position: relative; width: 100%; height: 20px; float: left;">
								<P class="fontTexto1" style="width:100%; line-height: 20px; text-align: center; background-color: white; <%=((p1.getNomeProduto().length() > 14 || p2.getNomeProduto().length() > 14)?"font-size: 14px;":"")%>"><%=p1.getNomeProduto()%></P>
							</div>
							<div style="position: relative; width: 90px; height: 90px; float: left;">
								<P><img src="<%=strImageP1%>" style="width: 90px; height: 90px;"></P>
							</div>
							<div id="divPlacarProd1" class="fontPlacar" style="position: relative; width: 60px; height: 90px; float: right; text-align: right; line-height: 90px;">
								<span id="valorPlacarP1"><%=numVotosTotais[0]%></span>
							</div>
							<div style="position: relative; width: 150px; height: 30px; float: left;">
								<div style="position:relative; height: 100%;">
									<div style="position:absolute; top:50%; width: 100%; height:24px; margin-top:-12px;">
										<div style="position: relative; width:120px; margin: 0px auto;">
											<button class="btnMoreResults" style="width: 120px; font-size: 9px; font-family: Helvetica;" onclick="votarProduto('<%=link%>', 1);"><%=Util.getConstant("Votar neste", locale)%></button>
										</div>
									</div>
								</div>
							</div>
						</div>
					<% } %>

					<% if (p2 != null) { %>
						<div id="divProd2" style="position: relative; width: 150px; height: 100%; float: right;">
							<div class="backgroundTransp" style="width:100%; height: 100%; background-color: #E0FFFF;">
							</div>
							<div style="position: relative; width: 100%; height: 20px; float: left;">
								<P class="fontTexto1" style="width: 100%; line-height: 20px; text-align: center; background-color: white; <%=((p1.getNomeProduto().length() > 14 || p2.getNomeProduto().length() > 14)?"font-size: 14px;":"")%>"><%=p2.getNomeProduto()%></P>
							</div>
							<div id="divPlacarProd2" class="fontPlacar" style="position: relative; width: 60px; height: 90px; float: left; text-align: left;  line-height: 90px;">
								<span id="valorPlacarP2"><%=numVotosTotais[1]%></span>
							</div>
							<div style="position: relative; width: 90px; height: 90px; float: right;">
								<P><img src="<%=strImageP2%>" style="width: 90px; height: 90px;"></P>
							</div>
							<div style="position: relative; width: 150px; height: 30px; float: right;">
								<div style="position:relative; height: 100%;">
									<div style="position:absolute; top:50%; width: 100%; height:24px; margin-top:-12px;">
										<div style="position: relative; width:120px; margin: 0px auto;">
											<button class="btnMoreResults" style="width: 120px; font-size: 9px; font-family: Helvetica;" onclick="votarProduto('<%=link%>', 2);"><%=Util.getConstant("Votar neste", locale)%></button>
										</div>
									</div>
								</div>
							</div>
							
						</div>
					<% } %>
				</div>

			<% } %>
		</section>

		<!-- 
		<div id="divFooter" style="background-color: orange;">
			<div style="position:relative; height: 100%;">
				<div style="position:absolute; top:50%; height:12px; margin-top:-6px; right: 0px;">quem somos &bull; contato &bull; mapa do site</div>
			</div>
		</div>
		 -->

	</body>
</html>